<template>
  <div class="managepage">
    <div class="managepage_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="审核账号" name="1">
                <div>
                  <div style="width:100%">
                    <el-button
                      @click="openDialog(1)"
                      style="width: 100%;margin-bottom:8px;height:35px;line-height: 10px;"
                      ><div>新增账号</div></el-button
                    >
                  </div>
                  <el-table
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <!-- fixed -->
                    <el-table-column prop="date" label="记录ID">
                      <template slot-scope="scope">
                        <div>{{ scope.row.sytem_id }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="手机号">
                      <template slot-scope="scope">
                        <div>{{ scope.row.phone }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="title" label="开始时间">
                      <template slot-scope="scope">
                        <div style="text-align:center">
                          {{ scope.row.start_time }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="结束时间">
                      <template slot-scope="scope">
                        <div style="text-align:center">
                          {{ scope.row.end }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="coupon" label="分配数量">
                      <template slot-scope="scope">
                        <div>
                          {{ scope.row.num }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="coupon" label="审核数量">
                      <template slot-scope="scope">
                        <div>
                          {{ scope.row.count }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="login_status" label="状态">
                      <template slot-scope="scope">
                        <div>
                          <el-switch
                            style="display: block"
                            v-model="scope.row.login_status"
                            active-color="#ff4949"
                            inactive-color="#13ce66"
                            active-text="禁用"
                            inactive-text="正常"
                            @change="
                              switchchange(
                                scope.row.login_status,
                                scope.row.sytem_id
                              )
                            "
                          >
                          </el-switch>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="active" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            @click.native.prevent="openDialog(scope.row)"
                            type="text"
                            size="small"
                            >修改
                          </el-button>
                          <el-button
                            @click.native.prevent="del(scope.row.sytem_id)"
                            type="text"
                            size="small"
                            >删除
                          </el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="width:100%;text-align:right">
                    <!-- 分页器 -->
                    <!-- @size-change="handleSizeChange" -->
                    <!-- background -->
                    <el-pagination
                      @current-change="handleCurrentChange2"
                      :current-page="currentPage"
                      :page-size="pagesize"
                      :pager-count="11"
                      layout="total, prev, pager, next, jumper"
                      :total="count"
                    >
                      <!-- :page-sizes="[100, 200, 300, 400]" -->
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <!-- <el-tab-pane label="修改密码" name="2"> </el-tab-pane> -->
            </el-tabs>
          </div>
          <el-dialog
            :title="isadd ? '新增账号' : '修改账号'"
            width="25%"
            :visible.sync="dialogFormVisible"
            center
          >
            <el-form
              :model="form"
              status-icon
              :rules="rules"
              :before-close="handleClose"
              ref="ruleForm"
            >
              <el-form-item
                v-if="isadd"
                label="手机号"
                prop="phone"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model.number="form.phone"
                  autocomplete="off"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item
                v-else
                label="列表记录id"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="form.record_id"
                  placeholder="请输入列表记录id"
                ></el-input>
              </el-form-item> -->
              <el-form-item
                label="开始时间"
                prop="start_time"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model.number="form.start_time"
                  autocomplete="off"
                  placeholder="请输入开始时间,范围0-24"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="结束时间"
                prop="end_time"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model.number="form.end_time"
                  autocomplete="off"
                  placeholder="请输入结束时间,范围0-24"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                prop="password"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="form.password"
                  autocomplete="off"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   systemAddUser,
//   getExamineList,
//   editUserInfo
// } from "@/api/local/mageback";
import {
  systemAddUser,
  getExamineList,
  editUserInfo,
  editSystemStatus,
  delSystemUser
} from "@/api/mageback/mageback";
export default {
  name: "teamset",
  data() {
    var phone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          let reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error("请填写正确手机号"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var start_time = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请填写开始时间"));
      }
      if (value === 24) {
        callback(new Error("开始时间不能为24"));
      }
      if (value > 24 || value < 0) {
        callback(new Error("请输入0-24之间的整数值"));
      }
      if (0 <= value < 24) {
        callback();
      } else {
        callback(new Error("请输入0-24之间的整数值"));
      }
    };
    var end_time = (rule, value, callback) => {
      if (this.form.start_time === "") {
        callback(new Error("请先填写开始时间"));
      }
      if (value === "") {
        callback(new Error("请填写结束时间"));
      }
      if (value > 24 || value < 0) {
        callback(new Error("请输入0-24之间的整数值"));
      }
      if (value === 0) {
        callback(new Error("结束时间不能为0"));
      }
      if (0 < value <= 24) {
        if (this.form.start_time >= this.form.end_time) {
          callback(new Error("结束时间不能小于或等于开始时间!"));
        } else {
          callback();
        }
      }
    };
    return {
      pagesize: 15,
      currentPage: 1,
      count: 0,
      isadd: true,
      dialogFormVisible: false,
      form: {
        record_id: "",
        phone: "",
        start_time: "",
        end_time: "",
        password: ""
      },
      rules: {
        phone: [{ validator: phone, trigger: "blur" }],
        start_time: [{ validator: start_time, trigger: "blur" }],
        end_time: [{ validator: end_time, trigger: "blur" }]
        // password: [{ validator: password, trigger: "blur" }],
        // record_id: [{ validator: record_id, trigger: "blur" }]
      },
      formLabelWidth: "120px",
      loading: false,
      activeName: "1",
      tableData: [
        {
          phone: "", // 手机号
          start_time: "", //开始时间
          sytem_id: "", // 当前记录的id
          end: "", //结束时间
          num: "", //分配数量
          count: "" //审核数量
        }
      ],
      chooseList: [],
      type: ""
    };
  },

  computed: {},
  created() {
    this.getExamineList();
  },
  mounted() {},
  methods: {
    del(id) {
      console.log(id);
      if (this.chooseList.length > 0) {
        let idstr = "";
        for (var k = 0; k < this.chooseList.length; k++) {
          idstr += this.chooseList[k].sytem_id + ",";
        }
        console.log(idstr);
        this.delSystemUser(idstr);
      } else {
        this.delSystemUser(id.toString());
      }
    },
    // 批量修改账号状态
    editSystemStatus(id_str, type) {
      editSystemStatus({
        id_str: id_str, //记录id 多个逗号拼接
        type: type //1 启用 2禁用
      })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("修改成功!");
            this.getExamineList();
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 批量删除账号
    delSystemUser(del_id) {
      delSystemUser({
        del_id: del_id
      })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("删除成功!");
            this.getExamineList();
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
          console.log(err);
        });
    },
    // 开关
    switchchange(status, id) {
      console.log(status, id);
      // var type = ;
      if (status == true) {
        this.type = 2;
      } else {
        this.type = 1;
      }
      if (this.chooseList.length > 0) {
        let idstr = "";
        for (var j = 0; j < this.chooseList.length; j++) {
          idstr += this.chooseList[j].sytem_id + ",";
        }
        console.log(idstr);
        this.editSystemStatus(idstr, this.type);
      } else {
        this.editSystemStatus(id.toString(), this.type);
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.chooseList = val;
      console.log(this.chooseList);
    },
    // 分页
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getExamineList(this.currentPage, 15);
    },
    // 关闭
    handleClose() {
      // this.form = {};
      this.resetForm("ruleForm");
      this.form = this.$options.data().form;
      // console.log(this.form);
      this.dialogFormVisible = false;
    },
    // 提交
    submitForm(formName) {
      console.log("表单内容", this.form);
      this.$refs[formName].validate(valid => {
        console.log("valid", valid);
        if (valid) {
          if (this.form.phone !== "") {
            console.log("form", this.form);
            systemAddUser(this.form)
              .then(res => {
                this.form = {};
                this.dialogFormVisible = false;
                this.$message.success(res.msg);
                console.log(res);
              })
              .catch(err => {
                this.$message.error(err.msg);
                this.dialogFormVisible = false;
                console.log(err);
              });
          }
          if (this.form.record_id !== "") {
            console.log("form", this.form);
            editUserInfo(this.form)
              .then(res => {
                console.log(res);
                this.form = {};
                this.$message.success(res.msg);
                this.dialogFormVisible = false;
              })
              .catch(err => {
                this.dialogFormVisible = false;
                this.$message.error(err.msg);
                console.log(err);
              });
          }
        } else {
          this.$message.error("请检查表单!");
        }
      });
    },
    // 打开弹窗
    openDialog(row) {
      this.dialogFormVisible = true;
      this.isadd = true;
      this.form = this.$options.data().form;
      if (row !== 1) {
        // this.resetForm("ruleForm");
        console.log(row);
        // this.form = row;
        this.form.start_time = row.start_time;
        this.form.end_time = row.end;
        this.form.record_id = row.sytem_id;
        this.isadd = false;
      }
    },
    // 获取账号列表
    getExamineList() {
      this.loading = true;
      getExamineList({
        page: 1,
        pagesize: 15
      })
        .then(res => {
          this.loading = false;
          console.log("账号列表", res.data);
          this.count = res.data.count;
          this.tableData = res.data.data;
          this.tableData = res.data.data.map(function(obj) {
            var rObj = {}; //obj为请求到的数据
            rObj.phone = obj.phone;
            rObj.login_status = obj.login_status;
            rObj.examine_uid = obj.examine_uid;
            rObj.start_time = obj.start_time;
            rObj.sytem_id = obj.sytem_id;
            rObj.end = obj.end;
            rObj.num = obj.num;
            rObj.count = obj.count;
            if (obj.login_status == 1) {
              rObj.login_status = false;
            } else {
              rObj.login_status = true;
            }
            return rObj;
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      console.log(this.form);
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    // 导航栏切换
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
.managepage {
  // width: 970px;
  box-sizing: border-box;
  // .managepage_main::v-deep {
  //   // width: 970px;
  // }
}
</style>
